<template>
  <div class="Add">
    <h1>产品新增/编辑</h1>
    <p>产品名称 : <input type="text" v-model="pname" /></p>
    <p>产品编号 : <input type="text" v-model="id" /></p>
    <p>成本价 : <input type="text" class="mar" v-model="price" /></p>
    <p>库存数 : <input type="text" class="mar" v-model="count" /></p>
    <p>登记人 : <input type="text" class="mar" v-model="user" /></p>
    <button @click="preserve">保存</button>
    <button>取消</button>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  ...mapState(["arr"]),
  data() {
    return {
      pname: "",
      id: "",
      price: "",
      count: "",
      user: "",
      uptDate:""
    };
  },
  methods: {
    ...mapMutations(["addProduct"]),
    preserve() {
      this.$router.push({ path: "/home/product" });
      this.addProduct({
        pname: this.pname,
        id: this.id,
        price: this.price,
        count: this.count,
        user: this.user,
        uptDate:new Date()
      });
    },
  },
};
</script>

<style lang="less" scoped>
.Add {
  margin: 30px auto;
  text-align: center;
  .mar {
    margin-left: 12px;
  }
  input {
    width: 300px;
    height: 20px;
    outline: none;
  }
  p {
    font-size: 18px;
  }
  button {
    width: 120px;
    height: 40px;
    margin: 0 10px;
    font-size: 16px;
    cursor: pointer;
  }
}
</style>